<template>
  <div>
    <el-table border
              :data="tableData" stripe
              style="width: 100%;height: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        <template slot-scope="{row, $index}">
          <span>{{ (curPage - 1) * 10 + $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称" :min-width="100">
        <template slot-scope="{row, $index}">
          <span>{{ row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="clazz" label="分类" :min-width="60">
        <template slot-scope="{row, $index}">
          <span>{{ row.clazz == 1 ? "城市" : "农村" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="subName" label="调查点名" :min-width="200">
        <template slot-scope="{row, $index}">
          <span>{{ row.subName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="name" label="联系人" :min-width="80">
        <template slot-scope="{row, $index}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" prop="phone" label="电话" :min-width="150">
        <template slot-scope="{row, $index}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="x" label="经度" :min-width="110">
        <template slot-scope="{row, $index}">
          <span>{{ row.x }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="y" label="纬度" :min-width="110">
        <template slot-scope="{row, $index}">
          <span>{{ row.y }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="data" label="操作" :min-width="160">
        <template slot-scope="{row, $index}">
          <el-row v-if="canEdit">
            <el-col :span="12">
              <el-button class="el-button el-button--mini el-button--success"
                         @click="opDialog2(row.id)">修改
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="el-button el-button--mini el-button--danger"
                         @click="opDialog(row.id)">删除
              </el-button>
            </el-col>
          </el-row>
          <el-button class="el-button el-button--mini el-button--danger" v-else
                     @click="opDialog(row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <msg-dialog @yes="deleteTask" @no="onCancel" :dialog-visible="dialogVisible"
                :msg="msg"></msg-dialog>
    <el-dialog
        title="修改调查点信息"
        :visible.sync="dialogVisible2"
        width="48%"
        v-if="dialogVisible2"
        :before-close="handleClose">
      <new-node ref="newDataForm" :id="chooseId"
                @updateData="updateData"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import qs from 'qs';
import MsgDialog from "../../menu/MsgDialog";
import NewNode from "../../form/NewBNode";

export default {
  name: "NodeTable",
  components: {
    NewNode,
    MsgDialog
  },
  data() {
    return {
      msg: '确定删除此行政村点',
      editTaskName: false,
      editRemark: false,
      multipleSelection: [],
      dialogVisible: false,
      dialogVisible2: false,
      chooseId: '',
      fullscreenLoading: false
    }
  },
  props: {
    tableData: {
      type: Array,
      defult: []
    },
    curPage: {
      type: Number,
      defult: 1
    },
    canEdit: {
      type: Boolean,
      defult: true
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    endEdit(event) {
      this.editTaskName = false;
      this.editRemark = false;
    },
    enterBlur(event) {
      event.target.blur()
    },
    deleteTask() {
      axios.post("/bjdzms/releaseSubtask/del",
          qs.stringify({
            'id': this.chooseId
          })).then(data => {
        this.total = data.data;
        this.dialogVisible = false;
        this.$emit('updateData');
      });
    },
    updateData() {
      this.$emit('updateData');
      this.fullscreenLoading = false;
      this.dialogVisible2 = false;
    },
    opDialog(id) {
      this.dialogVisible = true;
      this.chooseId = id;
    },
    opDialog2(id) {
      this.dialogVisible2 = true;
      this.chooseId = id;
    },
    onCancel() {
      this.dialogVisible = false;
      this.chooseId = '';
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.taskTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.taskTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    resetDateFilter() {
      this.$refs.taskTable.clearFilter('data');
    },
    clearFilter() {
      this.$refs.taskTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    submitForm() {
      this.$refs.newDataForm.submitForm();
      this.fullscreenLoading = true;
    }
  },
}
</script>

<style scoped>

</style>
